import React from 'react';
import { Select, Typography, Space } from 'antd';
import styled from 'styled-components';

const { Option } = Select;
const { Text } = Typography;

interface ThemeSelectorProps {
  currentTheme: string;
  onThemeChange: (theme: string) => void;
  themeType: 'markdown' | 'codeBlock';
  isDarkMode: boolean;
}

const SelectorContainer = styled.div`
  display: flex;
  align-items: center;
  margin-right: 16px;
`;

// Markdown主题列表
const markdownThemes = [
  { value: 'default', label: '默认' },
  { value: 'github', label: 'GitHub' },
  { value: 'github-dark', label: 'GitHub暗色' },
  { value: 'medium', label: '中等' },
  { value: 'notion', label: 'Notion' },
  { value: 'juejin', label: '掘金' },
  { value: 'csdn', label: 'CSDN' },
  { value: 'zhihu', label: '知乎' },
  { value: 'wechat', label: '微信' },
  { value: 'elegant', label: '优雅' },
  { value: 'academic', label: '学术' },
  { value: 'clean', label: '简洁' },
  { value: 'solarized', label: '日光' },
  { value: 'typora', label: 'Typora' },
  { value: 'lark', label: '飞书' },
  { value: 'nord', label: 'Nord' },
  { value: 'dracula', label: 'Dracula' },
  { value: 'vue', label: 'Vue' },
  { value: 'bear', label: 'Bear' },
  { value: 'foghorn', label: 'Foghorn' },
  { value: 'swiss', label: 'Swiss' },
  { value: 'newsprint', label: '报纸' },
  { value: 'gothic', label: '哥特' },
  { value: 'avenir', label: 'Avenir' },
  { value: 'markdown-alt', label: 'Markdown Alt' },
];

// 代码块主题列表
const codeBlockThemes = [
  { value: 'github', label: 'GitHub' },
  { value: 'atom-one-dark', label: 'Atom Dark' },
  { value: 'atom-one-light', label: 'Atom Light' },
  { value: 'monokai', label: 'Monokai' },
  { value: 'dracula', label: 'Dracula' },
  { value: 'vs', label: 'Visual Studio' },
  { value: 'vs-dark', label: 'VS Dark' },
  { value: 'solarized-light', label: '日光亮色' },
  { value: 'solarized-dark', label: '日光暗色' },
  { value: 'nord', label: 'Nord' },
  { value: 'one-dark-pro', label: 'One Dark Pro' },
  { value: 'material', label: 'Material' },
  { value: 'night-owl', label: 'Night Owl' },
  { value: 'synthwave', label: 'Synthwave' },
  { value: 'github-plus', label: 'GitHub Plus' },
];

const ThemeSelector: React.FC<ThemeSelectorProps> = ({ 
  currentTheme, 
  onThemeChange, 
  themeType, 
  isDarkMode 
}) => {
  const themes = themeType === 'markdown' ? markdownThemes : codeBlockThemes;
  const label = themeType === 'markdown' ? '文档主题' : '代码主题';
  
  return (
    <SelectorContainer>
      <Space>
        <Text style={{ color: isDarkMode ? '#f0f0f0' : '#000' }}>{label}:</Text>
        <Select
          value={currentTheme}
          onChange={onThemeChange}
          style={{ width: 120 }}
          dropdownMatchSelectWidth={false}
          showSearch
          optionFilterProp="children"
          filterOption={(input, option) => 
            (option?.children as unknown as string).toLowerCase().includes(input.toLowerCase())
          }
        >
          {themes.map(theme => (
            <Option key={theme.value} value={theme.value}>
              {theme.label}
            </Option>
          ))}
        </Select>
      </Space>
    </SelectorContainer>
  );
};

export default ThemeSelector; 